<template>
    <div class="poster-wrap" contenteditable="true" :style="{ transform: 'scale('+scale+')'}">
        <TopDesc/>
        <Benefits/>
        <Donated/>
        <Peoples/>
        <Bottom/>
    </div>
</template>

<script>
import Benefits from './Benefits.vue'
import TopDesc from './TopDesc.vue'
import Donated from './Donated.vue'
import Peoples from './Peoples.vue'
import Bottom from './Bottom.vue'
import { ref, onMounted } from 'vue'

export default {
    components: {
        TopDesc, Benefits, Donated, Peoples, Bottom
    },
    setup () {
        const scale = ref(1)
        onMounted(() => {
            const winWidth = document.documentElement.clientWidth || window.innerWidth
            if (winWidth < 640) {
                scale.value = winWidth / 640
            }
        })

        return {
            scale
        }
    }
}
</script>
<style lang="scss">
    @use "./style.scss";
</style>
